<html>
    <head>
        <title>页面加载效果</title>
        <meta charset="utf-8" />
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            body{
                display: flex;
                justify-content: center;
                align-items: center;
                text-align: center;
                height: 100vh;
                background: #0173d2;
            }
            .loader{
                position: relative;
                width: 200px;
                height: 200px;
                border-radius: 50%;
                box-shadow: 0 0 0 15px #080b1d;
                
            }
            .loader::before{
                content: '';
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                background: linear-gradient(45deg, #0b0f25 30%, #2196f3);
                border-radius: 50%;
                animation: animate 1s linear infinite;
            }
            .loader::after{
                content: '';
                position: absolute;
                top: 8px;
                bottom: 8px;
                left: 8px;
                right: 8px;
                border-radius: 50%;
                background: #0b0f25;
                box-shadow: inset 0 0 0 5px #080b1d;
            }
            @keyframes animate{
                0%{
                    transform: rotate(0deg);
                }
                100%{
                    transform: rotate(360deg);
                }
            }
        </style>
    </head>
    <body>
        <div class="loader"></div>
    </body>
</html>